<template>
  <v-card outlined fill-height width="100%">
    <v-card-title>后台文章配置</v-card-title>
    <v-card-text>
      <SplitLayout :leftSize="50" :leftMinSize="30" :rightMinSize="30">
        <template v-slot:left>
          <ArticleCategoryComponent
            @update:activeNode="currentCategory = $event"
            class="text-body1 align-left"
            style="overflow-y: scroll; height: 100%;"
          ></ArticleCategoryComponent>
        </template>
        <template v-slot:right>
          <ArticleList
            :category="currentCategory"
            class="text-body1 align-left"
            style="overflow-y: scroll; height: 100%;"
          ></ArticleList>
        </template>
      </SplitLayout>
    </v-card-text>
  </v-card>
</template>

<script>
import SplitLayout from "@/components/layout/SplitLayout";
import ArticleCategoryComponent from "@/components/article/Category";
import ArticleList from "@/components/article/ArticleList";
import { ArticleCategory } from "@/store/models/article"

export default {
  name: "Article",
  components: {
    SplitLayout,
    ArticleCategoryComponent,
    ArticleList,
  },
  data: () => ({
    currentCategory: new ArticleCategory(),
  }),
};
</script>
